<template>
    <div class="infoGoods">
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000" width="100%" height="300px">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img  class="imgs" v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
        <!-- 价格 -->
        <div class="price">
            <p class="price-top">
                <span>每日抄底 | </span>
                <span>
                    &nbsp;距离结束
                    <van-count-down :time="time" auto-start="startTime" />
                </span>
            </p>
            <p class="price-bottom">
                ¥<span v-html="data.originprice"></span> ¥<span v-html="data.originprice * (data.discount / 10)"></span>
            </p>
        </div>

        <p v-html="data.proname" class="name"></p>

        <!-- 商品导航 -->
        <van-goods-action  >
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onAddCartClicked" :badge="number" />
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button type="warning" text="加入购物车" @click.stop="onAddCartClicked(data.proid)" />
            <van-goods-action-button type="danger" text="立即购买" @click="onBuyClicked" />
        </van-goods-action>
        <swip />

    </div>

</template>

<script>
import service from "../../../request/service";
import swip from '../../LINK/merit/PuBuLiu.vue'
export default {
    components: {
        swip
    },
    data() {
        return {
            data: "",
            images: [],

            // 倒计时
            time: 30 * 60 * 60 * 1000,
            show: false,
            number: 0,
            // id:this.$route.query.id
        };
    },
    methods: {
        // 购买商品
        
        onBuyClicked() {
            this.$router.push("./buy");
        },
        // ,添加到购物车
        onAddCartClicked(v) {
            this.$router.push({ path:'/shopp', query: { id:v } });
           
        },
    },
    mounted() {
        service({
            url: `http://118.178.238.19:3001/api/pro/detail/${this.$route.query.id}`,
            method: "get",
        }).then((res) => {
            this.data = res.data.data;
            // this.images = res.data.data.banners
            this.images.push(res.data.data.img1);
            this.images.push(res.data.data.img2);
            this.images.push(res.data.data.img3);
            this.images.push(res.data.data.img4);
           
        });
    },
    // computed: {
    //     sum: {
    //         get() {
    //             return this.data.originprice * (this.data.discount / 10)
    //         }
    //     }
    // }
};
</script>

<style scoped>
.imgs{
    width: 100%;
    height: 18.75rem;
}
.price {
    height: 4.5625rem;
    background: #ed3833;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 0.875rem;
}

.name {
    padding: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.price-top {
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
}

.price-top span:last-child {
    display: flex;
    align-items: center;
}

.price-top>>>.van-count-down {
    color: white;
}

.price-bottom span:first-child {
    font-size: 1.5625rem;
    font-weight: bolder;
}

.price-bottom span:last-child {
    font-size: 0.625rem;
    text-decoration: line-through;
    opacity: 0.9;
}
.van-goods-action{
    z-index: 9 !important;
}
</style>